<template>
  <!--模板-->
  <h1>测试迭代</h1>
  {{state}}
</template>


<script setup lang="ts" generic="T extends {name: string}">
  import type { InjectionKey, ShallowRef, UnwrapRef } from 'vue'
  import {
    provide,
    inject,
    reactive,
    ref,
    shallowRef,
    readonly,
    watch
  } from 'vue'
  const model = defineModel()
  const props = defineProps({
    
  })
  // 用 Symbol 做标记，避免重名冲突
  const flag = Symbol('pager') as InjectionKey<string>

  function defineState<T>(state: T) {
    function reg() {
      console.log('使用 provide 注册一个局部状态')
      provide<T>(flag, state)
      return state
    }

    function get() {
      console.log('使用 inject 获取一个局部状态')
      const re = inject<T>(flag)
      if (re) {
        return re
      } else {
        // throw new Error('未注册')
      }
    }

    const res = {
      reg,
      get,
      [Symbol.iterator]: () => {
        let i = 0
        return {
          next() {
            if (i < 2) {
              return { value: i++ ? get : reg, done: false }
            } else {
              return { value: reg,done: true }
            }
          }
        }
      }
    }
    
    return res

  }

  const person = reactive({
    name: '基础类型',
    age:20
  })

  // 迭代
  const [aa,bb] = defineState(person)
  const cc = defineState(person)

  // 解构
  const { reg, get } = defineState(person)
  // 别名
  const { reg: regPerson, get: getPerson } = defineState(person)

  console.log('我是 迭代 - aa：', aa)
  console.log('我是 迭代 - bb：', bb)
  console.log('我是 defineState - cc：', cc)
  console.log('我是 解构 - reg：', reg)
  console.log('我是 解构 - get：', get)
  console.log('我是 别名 - regPerson', regPerson)
  console.log('我是 别名 - getPerson', getPerson)
  //注册
  const state = aa()
  const ss = bb()

  console.log('我是 注册：', state)
  console.log('我是 获取：', ss)


</script>